<template>
    <div class="box">
      <div class="chart">
        <div id="charts" ref="chart">
            <img
              src="../assets/RecTechnology.jpg"
              alt="Geological Hazard Atlas"
              class="image"
            />
        </div>
      </div>
    </div>
  </template>
  
  <script>
  import { useStore } from "vuex";
  import { onMounted, onUnmounted } from "vue";
  
  onMounted(() => {
    myChart.value = echarts.init(document.getElementById("chart"));
    myChart.value.setOption(option);
  });
  export default {
    name: "RecTechnology",
    mounted() {
        this.$emit("changeTimeIndex", 18);
        this.$emit("changeIsSelect2", true);
        this.$emit("changeIsSelect3", false);
        this.$emit("changeIsTimeOperator", false);
      },
  };
  </script>
  
  <style scoped lang="scss">
  @media screen and (min-width: 700px) {
    .box {
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .chart {
      border: 3px double #1996ef;
      background-color: #fff;
      margin: 60px;
      width: 60%;
      height: auto;
      position: relative;
      justify-content: center;
      align-items: center;
      display: flex;
  
      #charts {
        width: auto;
        height: 70vh;
        overflow-y: auto;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
    .image {
      display: block;
      max-width: 100%; /* 图片宽度不超过容器宽度 */
      height: auto; /* 图片高度自适应 */
      width: auto;
    }
  }
  </style>
  